<template>
  <div class="filters">
    <span
      v-for="filter in filters"
      :key="filter.value"
      :class="{ active: selected === filter.value }"
      @click="$emit('change-filter', filter.value)"
      class="filter"
    >
      {{ filter.label }}
    </span>
  </div>
</template>   

<script setup>
const filters = [
  { label: '全部', value: 'all' },
  { label: '已完成', value: 'done' },
  { label: '未完成', value: 'todo' }
]
const props = defineProps({
  selected: String
})
const emits = defineEmits(['change-filter'])
</script>

<style lang="scss" scoped>
.filters .filter {
  cursor: pointer;
}
</style>